<template>
  <el-dialog :visible.sync="show" width="450px" :close-on-click-modal="false" center title="重置密码">
    <el-card>
      <el-row class="ma_1 center_x my_4">
        <el-col :span="6" class="center_y">
          <strong>邮箱</strong>
        </el-col>
        <el-col class="frx" :span="18">
          <el-input placeholder="请填写注册邮箱" v-model="form.email"></el-input>
        </el-col>
      </el-row>

      <!--  -->
      <el-row class="ma_1 center_x my_4">
        <el-col :span="5" class="center_y mr_5">
          <strong>验证码</strong>
        </el-col>
        <el-col :span="10" class="center_y">
          <el-input placeholder="请填写验证码" v-model="form.checkCode"></el-input>
        </el-col>
        <el-col class="frx" :span="9">
          <el-button type="primary" :disabled="testEmail()" @click="sendCheckCode">发送验证码</el-button>
        </el-col>
      </el-row>
      <!--  -->
      <el-row class="ma_1 center_x my_4">
        <el-col :span="6" class="center_y">
          <strong>新密码</strong>
        </el-col>
        <el-col class="frx" :span="18">
          <el-input placeholder="请输入新的密码" v-model="form.password" show-password></el-input>
        </el-col>
      </el-row>
      <!--  -->
      <el-row class="ma_1 center_x my_4">
        <el-col :span="6" class="center_y">
          <strong>确认密码</strong>
        </el-col>
        <el-col class="frx" :span="18">
          <el-input placeholder="请确认你的密码" v-model="form.confirmPwd" show-password></el-input>
        </el-col>
      </el-row>
      <!--  -->
      <el-row class="center_x ma-1 my_4">
        <el-button type="primary" style="width: 200px;" :disabled="testPass()||testEmail()" @click="updatePassword">提交</el-button>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import UApi from "../../api/UserApi";
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      show: this.visible,
      form: {
        email: "",
        checkCode: "",
        password: "",
        confirmPwd: ""
      }
    };
  },
  watch: {
    visible: function(val) {
      this.show = val;
    },
    show: function(val) {
      this.$emit("update:visible", val);
    }
  },
  methods: {
    testEmail() {
      return !/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(
        this.form.email
      );
    },
    testPass() {
      return !(
        this.form.confirmPwd === this.form.password && this.form.password !== ""
      );
    },
    loadPayload() {
      return {
        email: this.form.email,
        checkCode: this.form.checkCode,
        newPassword: this.form.password,
        confirmPassword: this.form.confirmPwd
      };
    },
    sendCheckCode() {
      this.axios
        .get(UApi.forget, { params: { email: this.form.email } })
        .then(res => {
          if (res.data.status == 0) {
            this.$message({
              showClose: true,
              message: "验证码发送成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    updatePassword() {
      this.axios.put(UApi.updatePassword, this.loadPayload()).then(res => {
        if (res.data.status == 0) {
          this.show = false;
          this.$message({
            showClose: true,
            message: "密码修改成功",
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style>
</style>
